<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <!-- <el-breadcrumb-item> <i class="el-icon-lx-friendadd"></i> 表单 </el-breadcrumb-item> -->
                <el-breadcrumb-item><i class="el-icon-lx-friendadd"></i>课题详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="projectData" label-width="80px" style="margin-left: 70px">
                <el-form-item label="课 题 号:">
                    <span>{{ projectData.projectId }}</span>
                </el-form-item>
                <el-form-item label="课 题 名:">
                    <span>{{ projectData.projectName }}</span>
                </el-form-item>
                <el-form-item label="指导老师:">
                    <span>{{ projectData.teacher.teacherName }}</span>
                </el-form-item>
                <el-form-item label="老师电话:">
                    <span>{{ projectData.teacher.teacherPhone }}</span>
                </el-form-item>
                <el-form-item label="老师邮箱:">
                    <span>{{ projectData.teacher.teacherEmail }}</span>
                </el-form-item>
                <el-form-item label="简 介:">
                    <span>{{ projectData.content }}</span>
                </el-form-item>
                <el-form-item label="小 组:">
                    <span>{{ projectData.team == null ? '暂无' : projectData.team.teamName }}</span>
                </el-form-item>
            </el-form>
            <el-form label-width="80px" style="margin-left: 70px" :model="teamMate" v-show="hasTeam">
                <el-form-item label="组 员:">
                    <span v-for="name in teamMate">{{ name }} </span>
                </el-form-item>
            </el-form>
            <el-form label="小组文件:" v-show="hasTeam">
                <el-table
                    :data="filesList.filter((data) => !search || data.filesName.toLowerCase().includes(search.toLowerCase()))"
                    :default-sort="{ prop: 'teamId', order: ' ascending' }"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column label="文件名" sortable prop="filesName"> </el-table-column>
                    <el-table-column label="上传者" sortable prop="student.studentName"></el-table-column>
                    <el-table-column label="文件类型" prop="type"> </el-table-column>
                    <el-table-column label="文件大小" sortable prop="size"></el-table-column>
                    <el-table-column label="下载次数" sortable prop="downcounts"> </el-table-column>
                    <el-table-column label="上传时间" sortable prop="uploadTime"> </el-table-column>
                    <el-table-column align="center">
                        <template slot="header" slot-scope="scope">
                            <el-input v-model="search" size="mini" placeholder="输入文件名搜索" />
                        </template>
                        <template slot-scope="scope" align="center">
                            <el-button type="text" @click="downLoad(scope.$index, scope.row)">下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div style="text-align: center; margin-top: 50px">
                <el-button type="primary" @click="doPoint = true" v-show="makePoint">打分</el-button>
                <el-button type="primary" @click="joinProject()" v-show="chooseProject">选择该项目</el-button>
                <el-button type="danger" @click="deleteProject" v-show="delProject">删除项目</el-button>
            </div>
        </div>

        <!-- 打分弹出框 -->
        <el-dialog title="课题打分" :visible.sync="doPoint" width="40%">
            <el-form :rules="rules" :model="teamPoint" label-width="100px" ref="addTeamPoint">
                <el-form-item label="小组评分： " prop="teamPoint">
                    <el-col :span="13">
                        <el-rate v-model="teamPoint" show-text style="margin-top: 7px"> </el-rate>
                    </el-col>
                </el-form-item>
            </el-form>
            <div style="margin-left: 17px; margin-bottom: 10px">组员评分：</div>
            <el-form :rules="rules" :model="matePoint" label-width="100px" ref="addMatePoint">
                <el-form-item v-for="(name, index) in teamMate" :label="name" prop="matePoint[index]">
                    <el-col :span="20">
                        <!-- <el-input placeholder="请输入分数" v-model="matePoint[index]"> </el-input> -->
                        <el-slider v-model="matePoint[index]" show-input>{{ matePoint[index] }}</el-slider>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm()">取 消</el-button>
                <el-button type="primary" @click="addPoint()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    data() {
        return {
            number: localStorage.getItem('ms_number'),
            hasTeam: false,
            makePoint: false,
            projectId: localStorage.getItem('projectMessage'),
            projectData: [],
            filesList: [],
            teamMate: [],
            chooseProject: true,
            role: localStorage.getItem('ms_role'),
            delProject: false,
            doPoint: false,
            matePoint: [],
            teamPoint: ''
        };
    },
    created() {
        this.$http.get('http://localhost:9900/project/showProject?projectId=' + this.projectId).then((res) => {
            this.projectData = res.data;
            if (res.data.team != null) {
                this.$http.get('http://localhost:9900/team/findAllTeammate?teamId=' + res.data.team.teamId).then((mate) => {
                    console.log(mate.data);
                    this.teamMate = mate.data;
                });
                if (this.role == '学生') {
                    this.makePoint = false;
                    this.hasTeam = false;
                    this.chooseProject = false;
                }
                if (this.role == '老师') {
                    this.$http.get('http://localhost:9900/files/findTeamFiles?teamID=' + res.data.team.teamId).then((files) => {
                        this.makePoint = true;
                        this.hasTeam = true;
                        this.delProject = true;
                        this.chooseProject = false;
                        this.filesList = files.data;
                    });
                }
            }
            if (res.data.team == null) {
                if (this.role == '老师') {
                    this.chooseProject = false;
                    this.delProject = true;
                }
            }
        });
    },
    methods: {
        //打分
        addPoint() {
            console.log(this.teamPoint);
            console.log(this.matePoint);
            this.$http({
                method: 'post',
                url: 'http://localhost:9900/tea/makePoint',
                data: {
                    teamPoint: this.teamPoint,
                    matePoint: this.matePoint,
                    teamId: this.projectData.team.teamId
                }
            }).then((res) => {
                if (res.data == 'success') {
                    console.log(res.data);
                    this.doPoint = false;
                    this.$message.success('打分完成！');
                } else {
                    this.$message.error('服务器出错，请稍后再试！');
                }
            });
        },
        //取消打分
        resetForm() {
            this.doPoint = false;
            this.teamPoint = '';
            this.matePoint = [];
        },
        //删除项目
        deleteProject() {
            var teamId = 0;
            this.$confirm('您确定要删除该项目吗？将会造成严重后果！', '提示', {
                type: 'warning'
            }).then(() => {
                if (this.projectData.team == null) {
                    teamId = 0;
                } else {
                    console.log();
                    teamId = this.projectData.team.teamId;
                    console.log(teamId);
                }
                this.$http
                    .get('http://localhost:9900/project/deleteProject?projectId=' + this.projectData.projectId + '&teamID=' + teamId)
                    .then((res) => {
                        console.log(res.data);
                        if (res.data == '200') {
                            this.$message.success('删除成功！');
                            this.$router.push('/projectTable');
                        } else {
                            this.$message.success('服务器出错，请稍后再试！');
                            this.$router.push('/projectTable');
                        }
                    });
            });
        },
        //选择项目
        joinProject() {
            console.log(this.projectData);
            console.log(this.number);
            this.$http
                .get('http://localhost:9900/project/joinProject?projectId=' + this.projectData.projectId + '&number=' + this.number)
                .then((res) => {
                    console.log(res.data);
                    if (res.data != 'success!') {
                        this.$message.error(res.data);
                    } else {
                        this.$message.success('成功选择该课题，请尽快开始！');
                    }
                });
        },
        //退出小组
        //
        //下载
        downLoad(index, row) {
            let a = document.createElement('a');
            a.href = 'http://localhost:9900/files/downloadFiles?id=' + row.filesId;
            a.click();
            this.$message.success('正在下载！');
        },
        onSubmit() {
            this.$message.success('提交成功！');
        }
    }
};
</script>